<template>
    <div class="login-container">
        <div class="login">
            <img src="../../assets/images/logo.png" alt="">
        </div>
        <div class="info">
            <van-cell-group inset>
                <van-field label="手机号" type="tel" v-model="tel" />
                <van-field label="密码" type="password" v-model="password" />
            </van-cell-group>
        </div>
        <div class="btn" @click="onLogin">
            <van-button color="#684886" type="primary" block>登录</van-button>
        </div>
        <div class="other">
            <div class="free" @click="onFree">没有账号，免费注册</div>
            <div class="forget">忘记密码</div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue"
import { useRoute,useRouter } from "vue-router"
import { useTokenStore } from "../../stores/login"
import { Md5 } from "ts-md5"
import { showFailToast } from 'vant'
import "vant/es/toast/style"

const tokenStore = useTokenStore()

const router = useRouter()
const route = useRoute()
const tel = ref<string>()
const password = ref<string>()

const onFree = () => {
    router.push("/register")
}

const onLogin = () => {
    tokenStore.setToken({
        phone: tel,
        password: password,
        verify: Md5.hashStr('iwenwiki')
    }, () => {
        // 获取从哪里回哪去的路径   断言处理错误提示
        route.query.redirect ? router.replace(route.query.redirect as string) :  router.replace("/mine")
    }, (error: any) => {
        showFailToast(error.msg);
    })
}

</script>
<style lang="less" scoped>
.login-container {
    .login {
        width: 100%;
        margin-top: 50px;
        text-align: center;

        img {
            width: 150px;
        }
    }

    .info {
        margin-top: 50px;
    }

    .btn {
        padding: 20px;
    }

    .other {
        display: flex;
        padding: 20px;
        padding-top: 0;

        .free {
            flex: 1;
            font-size: 14px;
        }

        .forget {
            text-align: right;
            flex: 1;
            font-size: 14px;
        }
    }
}
</style>
